<template>
  <div class="aid">
    <div class="base">
      <p>{{ JSON.stringify(text)=='{}'?'新增问题类型':'修改问题类型' }}
        <a-icon @click="closeFunction(false)" class="closeCircle" type="close-circle" />
      </p>
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <a-form-model-item label="问题类型" prop="Name">
          <a-input v-model="form.Name" :allowClear="true" />
        </a-form-model-item>
        <a-form-model-item label="上级" prop="ParentID">
          <a-select show-search option-filter-prop="children" :filter-option="filterOption" v-model="form.ParentID" :allowClear="true" >
            <a-select-option v-for="(item, index) in parentList" :key="item.ID"> {{ item.Name }} </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="处理部门" prop="DepartUser">
          <a-select :showSearch="true" :value="value" :filter-option="filterOption" @change="handleChange" label-in-value
                    option-filter-prop="children"
          >
            <a-select-option v-for="(item,index) in departList" :key="item.ID" >
              {{ item.DepartName }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <div class="" v-for="(item,index) in OfficeList" :key="item.ID">
          <a-form-model-item class="flex-1" :label="item.label||item.DepartName" >
            <a-select v-model="item.value" @change="e => changeUser(e, item.ID, index)" :showSearch="true" :filter-option="filterOption" style="width: 90%;margin-right: 15px;">
              <a-select-option v-for="(v, i) in item.Select" :key="v.UserID">
                {{ v.Name }}
              </a-select-option>
            </a-select>
            <span class="el-icon-delete" style="cursor: pointer;color: red;font-size: 22px;" @click="deleteOfficeList(item,index)"></span>
          </a-form-model-item>
        </div>
        <a-form-model-item label="" :wrapper-col="{ offset: 5 }">
          <el-button type="success" size="medium" class="btn2" @click="handleSubmit">
            确定
          </el-button>
          <el-button size="medium" style="margin-left: 10px;" @click="closeFunction(false)">
            取消
          </el-button>
        </a-form-model-item>
      </a-form-model>
    </div>
    <span style="display: none;">{{ msg }}</span>
  </div>
</template>

<script>
	import {
		getDepartList,
		getDepartUserList,
		getQuestionParentList,
		addQuestion,
		updateQuestion
	} from '@/api/follow'

	export default {
		props: {
			text: Object,
			nowTime: String
		},
		watch: {
			text: async function(text) {

			},
			nowTime: async function(text) {
				if (JSON.stringify(this.text) == '{}') {
					this.form = {}
					this.value = []
				} else {
					this.form.ID = this.text.ID
					this.form.Name = this.text.Name
					this.form.ParentID = this.text.ParentID
					this.OfficeList = this.text.DepartIDList
					this.value = [{key: this.text.DepartIDList[0].DepartID ? this.text.DepartIDList[0].DepartID : ''}]
					for (let i = 0, len = this.OfficeList.length; i < len; i++) {
						this.OfficeList[i].value = this.OfficeList[i].UserList[0].UserID
						let res = await getDepartUserList({'departID': this.OfficeList[i].DepartID})
						this.OfficeList[i].Select = res.data.data
						let departUser = []
						departUser.push(this.OfficeList[i].DepartID + '|' + this.OfficeList[i].UserList[0].UserID)
						this.departUser = this.departUser.concat(departUser)
					}
					this.msg++
				}
			}
		},
		data() {
			return {
				msg: 0,
				formLayout: 'horizontal',
				index: 0,
				departList: [],
				nodeList: [],
				CenterDropdownList: [],
				OfficeList: [],
				departUser: [],
				selectedItems: [],
				parentList: [],
				ParentName: '',
				fetching: false,
				value: [],
				form: {
					Name: '',
					ParentID: '',
					DepartUser: '',
					ID: ''
				},
				rules: {
					Name: [{
						required: true,
						message: '请输入问题类型',
						trigger: 'blur'
					}]
				}
			}
		},
		created() {
			this._getQuestionParentList()
			setTimeout(() => {
			   this.fetchUser()
			}, 1200)
		},
	  computed: {
			// filteredOptions() {
			// 	return this.departList.filter(o => !this.value.includes(o.DepartName))
			// }
		},
		methods: {
			filterOption(input, option) {
			      return (
			        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
			      );
			    },
			async _getQuestionParentList(value) {
				let res = await getQuestionParentList()
				this.parentList = res.data.data
			},
			filterOption(input, option) {
				return (
					option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
				)
			},
			async fetchUser(value) {
				let data = {}
				data.key = value
				let res = await getDepartList(data)
				this.departList = res.data.data
				console.log(this.departList)
			},
			async handleChange(list) {
				this.value = list
				this.form.DepartUser = list.toString()
				let OfficeList = []
				let select = []
				let num = this.OfficeList.filter(item => item.ID == list.key)
				if (num == 0) {
					let res = await getDepartUserList({'departID': list.key})
					OfficeList.push({label: list.label.trim(), ID: list.key, Select: res.data.data})
					this.OfficeList = this.OfficeList.concat(OfficeList)
				}
			},
			deleteOfficeList(item, index) {
				this.OfficeList.splice(index, 1)
				this.departUser.splice(index, 1)
			},
			changeUser(item, id, index) {
				let departUser = []
				departUser.push(id + '|' + item)
				this.departUser = this.departUser.concat(departUser)
			},
			closeFunction(flag) {
				this.departUser = []
				this.OfficeList = []
				this.$emit('closeFun', flag)
			},
			handleSubmit(e) {
				this.$refs.ruleForm.validate(async valid => {
					if (valid) {
						let res = {}
						let data = this.form
						data.DepartUser = this.departUser.join(',')
						if (JSON.stringify(this.text) == '{}') {
							res = await addQuestion(data)
						} else {
							data.ID = this.text.ID
							res = await updateQuestion(data)
						}
						this.$message.success(res.data.msg)
						if (res.data.code === 1) {
							setTimeout(() => {
								this.closeFunction(true)
							}, 1000)
						}
					} else {
						console.log('error submit!!')
						return false
					}
				})
			}
		}
	}

</script>

<style lang="less" scoped>
	.flex{
		display: flex;
	}
	.row {
		display: flex;
		justify-content: space-around;
		margin-top: 15px;
	}

	.aid {
		position: fixed;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		top: 0px;
		left: 0px;
		z-index: 999;
	}

	.base {
		position: fixed;
		width: 600px;
		height: 540px;
		background: #fff;
		left: 50%;
		top: 50%;
		margin-left: -300px;
		margin-top: -270px;
		overflow-y: auto;
		border-radius: 8px;

		/deep/.ant-form-item {
			margin: 20px 30px 10px 20px;
			/deep/.ant-form-item-label {
				margin-right: 10px;
				width: 110px;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				text-align: right !important;
			}

			/deep/.ant-form-item-control-wrapper {
				flex: 1;
			}
		}
	}

	.base p {
		padding: 20px 0 0 20px;
		font-size: 16px;

		.closeCircle {
			font-size: 22px;
			float: right;
			margin-right: 18px;
		}
	}

	.subnav {
		margin-left: 60px;
		height: 46px;
		display: flex;
	}

	.subnav p {
		width: 100px;
		text-align: right;
	}

	.subnav input {
		width: 300px;
		height: 30px;
		border: 1px solid #DAD9DC;
		margin-left: 20px;
	}

	.ant-form-item {
		margin-bottom: 10px;
	}
</style>
